<template>
  <NavBarVue title="商家首页" />
  <view class="myBox">
    <uni-row>
      <uni-col :span="20">
        <uni-search-bar
            v-model="searchQuery"
            placeholder="搜索商品"
            bgColor="#EEEEEE"
            @confirm="search"
            @input="updateSearchQuery"
        />
      </uni-col>
    </uni-row>

    <!-- 主体部门 -->
    <view class="main">
      <u-sticky offset-top="0">
        <div class="main_tab">
          <u-tabs :list="list1" @click="click"></u-tabs>
        </div>
      </u-sticky>
      <div class="pubu">
        <view class="item-container">
          <view class="item" v-for="item in list1" :key="item.id">
            <image :src="item.picture" class="tt"></image>
            <view class="nr">
              {{ item.name }}
            </view>
            <view class="tx" style="display: flex;justify-content: space-between;">
              <view style="display: flex;">
                <image src="/static/1002.png" style="width:20px;height: 20px;border-radius: 10px;" />
                <view style="font-size: 12px;">{{ item.ming }}</view>
              </view>
              <view style="display: flex;">
                <view style="font-size: 12px;">{{ item.price }}</view>
              </view>
            </view>
            <!-- 添加购买按钮 -->
            <button class="purchase-button" @click="buyNow(item)">立即购买</button>
          </view>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import { selectGoods } from "./api/goods";

export default {
  data() {
    return {
      list1: [],
      id: '',
      name: '',
      price: '',
      ming: '',
      status: '',
      picture: '',
      searchQuery: '', // 新增搜索查询字段
    };
  },
  mounted() {
    // 在组件挂载后查询商品信息
    this.queryParkingFees('在售'); // 传递状态参数 '在售'
  },
  methods: {
    async queryParkingFees(status) {
      try {
        const res = await selectGoods(status); // 使用 orderId
        console.log('开始查询');
        if (res.data && res.data.length > 0) {
          this.list1 = res.data; // 直接将整个数组赋值给 parkingFees
          this.list1.forEach(item => {
            item.picture = 'http://localhost:8080' + item.picture;
          });
          console.log('查询到的商品信息', this.list1);
        } else {
          console.log('未找到商品信息');
          uni.showToast({
            title: '暂时没有商品信息',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取商品详情页失败', error);
        uni.showToast({
          title: '网络延迟，请稍后重试',
          icon: 'none'
        });
      }
    },

    click(item) {
      console.log('item', item);
    },
    rightClick() {
      console.log('rightClick');
    },
    toggleFavorite(item) {
      item.flag = !item.flag;
    },
    buyNow(item) {
      console.log(item);
      this.$router.push({
        path: `/pages/orders/orders`,
        query: {
          goodsId: item.id,
          goodsName: encodeURIComponent(item.name)
        }
      });
    },
    async search(res) {
      const query = res.value;
      console.log('Search query:', query);

      try {
        const response = await selectGoods(query, '在售'); // 传递查询参数和状态参数 '在售'
        const results = response.data;

        // 根据返回的数据更新 leftlist 和 rightlist
        this.leftlist = [];
        this.rightlist = [];

        results.forEach((item, index) => {
          if (index % 2 === 0) {
            this.leftlist.push(item);
          } else {
            this.rightlist.push(item);
          }
        });
      } catch (error) {
        console.error('Error searching:', error);
      }
    },
    updateSearchQuery(event) {
      this.searchQuery = event.detail.value; // 更新搜索查询字段
    }
  }
};
</script>

<style scoped>
.myBox {
  width: 100vw;
  height: 100vh;
}

.main {
  width: 100%;
  margin-top: -30px;
}

.main_tab {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 12px 12px 0px 0px;
  display: flex;
  justify-content: center;
}

.pubu {
  width: 100%;
  height: auto;
  padding: 10px;
}

.item-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 48%; /* 每个商品占据48%的宽度，留出2%的间距 */
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing: border-box;
}

.tt {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.nr {
  font-size: 14px;
  margin-top: 10px;
}

.tx {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0px 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.purchase-button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: brown;
  cursor: pointer;
  margin-top: 10px;
}
</style>
